@charset "utf-8";
@import "remCalc";
@import "colors";

.f18 {
	@include remCalc(font-size, 18);
}
.f20 {
	@include remCalc(font-size, 20);
}
.f24 {
	@include remCalc(font-size, 24);
}
.f28 {
	@include remCalc(font-size, 28);
}
.f30 {
	@include remCalc(font-size, 30);
}
.f32 {
	@include remCalc(font-size, 32);
}
.f36 {
	@include remCalc(font-size, 36);
}

.mt10 {
	@include remCalc(margin-top, 10);
}
.mt15 {
	@include remCalc(margin-top, 15);
}
.mt20 {
	@include remCalc(margin-top, 20);
}
.mt30 {
	@include remCalc(margin-top, 30);
}
.mt35 {
	@include remCalc(margin-top, 35);
}
.mt50 {
	@include remCalc(margin-top, 50);
}

.w100 {
  width: 100%;
}

.padding-safe-area-bottom{
  // padding-bottom:constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
  // padding-bottom:env(safe-area-inset-bottom); /*iOS 11.2及以上 */
  // box-sizing: border-box;
}
.margin-safe-area-bottom{
  // margin-bottom:constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
  // margin-bottom:env(safe-area-inset-bottom); /*iOS 11.2及以上 */
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}
.popup-wrap{
  width:100%;
  height:100%;
}
%layer {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.56;
  background: #000;

  filter: alpha(opacity=56);
}

%box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

//end nav-left
%scroll-view {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 100%;
  height: 100%;

  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
}

%scroll-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;

  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  @extend %box-sizing;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

//弹性左右
%flex-left-right-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;

  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
}

%flex-left-right-item {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

//一行文字超出隐藏
%text-overflow {
  overflow: hidden;
  /*文字隐藏后添加省略号*/
  white-space: nowrap;
  /*自动隐藏文字*/
  text-overflow: ellipsis;
  /*强制不换行*/
}
@mixin sw ($font-size, $font-weight) {
  font-size: $font-size;
  font-weight: $font-weight;
}
//两行文字超出隐藏
%text-overflow-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html.remove-status-bar .header {
  padding-top: 0 !important;
}
.page {
  background: $background;
  height: 100%;
}

%text-vertical-align-middle {
  display: -webkit-box;

  -webkit-box-align: center;
  -webkit-box-pack: center;
}

%flex {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

%flex-item {
  -webkit-box-flex: 1;
  /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;
  /* OLD - Firefox 19- */
  -webkit-flex: 1;
  /* Chrome */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

@mixin thin-border($double: false, $isPostion: false, $topOrBottom: top, $color: $color-border) {
  @if $isPostion== false {
    position: relative;
  }
  @if $double== false {
    &:after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid $color;
      transform: scaleY(0.5);
      transform-origin: 0 0;
      #{$topOrBottom}: -1px;
    }
  } @else {
    &:before {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid $color;
      transform: scaleY(0.5);
      transform-origin: 0 0;
    }
    &:after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      border-bottom: 1px solid $color;
      transform: scaleY(0.5);
      transform-origin: 0 0;
    }
  }
}
input + .cdicon-ico_delete {
  position: relative;
  display: none;
  color: #ccc;

  @include remCalc(top, 4);
  @include remCalc(margin-left, -40);
  @include remCalc(right, -30);
}

input:valid:focus + .cdicon-ico_delete {
  display: inline;
}
.btn-wrap {
  @include remCalc(padding, 0, 30);
  .btn {
    display: block;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    background: $color-red;

    @include remCalc(height, 88);
    @include remCalc(line-height, 88);
    @include remCalc(border-radius, 8);
    @include remCalc(font-size, 36);
    &.disabled {
      color: #fff !important;
      background: #ccc !important;
    }
    &.cancel {
      border: 1px solid #eaeaed;
      color: #7f7f7f !important;
      background: #fff !important;
    }
  }
}
.hide {
  display: none;
}
.mint-msgbox-btn {
  @include remCalc(font-size, 36);
}
.mint-swipe-indicator {
  &.is-active {
    background: #5f8ce7 !important;
    opacity: 1;
  }
}
.mint-cell {
  @include remCalc(min-height, 90);
  .mint-cell-wrapper {
    @include remCalc(font-size, 28, !important);
    @include remCalc(padding, 0, 30);
    color: #333;
    .mint-cell-title {
      @include remCalc(font-size, 30);
    }
    .mint-field-core {
      text-align: right;
    }
  }
}
.mint-searchbar-cancel {
  @include remCalc(font-size, 30, !important);
}
.mint-search {
  height: auto;
}
.mint-toast {
  z-index: 3000;
}
.pull-to-refresh {
  @include remCalc(line-height, 88);
  @include remCalc(font-size, 30);
  @include remCalc(height, 88);
  > img {
    @include remCalc(width, 40);
    @include remCalc(height, 40);
    @include remCalc(margin-right, 10);
    position: relative;
    @include remCalc(top, -6);
  }
  color: #999;
  &.pull {
  }
  &.drop {
    > img {
      transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      /* IE 9 */
      -moz-transform: rotate(180deg);
      /* Firefox */
      -webkit-transform: rotate(180deg);
      /* Safari 和 Chrome */
      -o-transform: rotate(180deg);
    }
  }
}
.mint-switch-input:checked + .mint-switch-core {
  background-color: #459dff;
  border-color: #459dff;
}
// 条形列表公共样式
.linebar-list {
  background: #fff;
  @include thin-border(true, false);
  li {
    display: flex;
    @include remCalc(padding, 22, 30, 22, 0);
    @include remCalc(line-height, 44);
    @include remCalc(margin-left, 30);
    .context-left {
      color: #333;
      @include remCalc(font-size, 32);
      display: flex;
    }
    .context-right {
      flex: 1;
      text-align: right;
      > i {
        // 箭头
        &.zhk-list_rarrow {
          color: #ccc;
          @include remCalc(font-size, 36);
        }
      }
    }
  }
}
.no-more {
  text-align: center;
  color: #999;
  @include remCalc(font-size, 24);
  @include remCalc(padding, 30);
}
.form-title {
  @include remCalc(font-size, 24);
  @include remCalc(line-height, 32);
  @include remCalc(padding, 20, 30);
  color: #999;
}
.form-style {
  background: #fff;
  @include thin-border(true, false);
  > li {
    @include thin-border(false, false, top);
    @include remCalc(min-height, 88);
    &.readOnly {
      color: #bbb !important;
    }
    &:first-child {
      &:after {
        display: none;
      }
    }
    display: flex;
    @include remCalc(font-size, 32);
    @include remCalc(padding, 22, 30, 22, 0);
    @include remCalc(margin-left, 30);
    box-sizing: border-box;
    color: #333;
    > span {
      min-width: 4rem;
      // @include remCalc(min-width, 200);
      .tip {
        @include remCalc(font-size, 22);
        color: #999;
        @include remCalc(padding-top, 22);
        .sl-flbgz {
          color: #f86e21;
          @include remCalc(padding-right, 4);
        }
      }
    }
    > div {
      flex: 1;
      text-align: right;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      .area {
        .select-btn {
          @include remCalc(margin, 14, 0, 0, 0);
          &:first-child {
            margin-top: 0;
          }
        }
      }
      > input {
        text-align: right;
        height: 100%;
        color: #333;
        @include remCalc(font-size, 32);
        &.input-thin {
          @include remCalc(width, 200);
          @include remCalc(padding, 20, 0);
          @include remCalc(margin, -20, 0);
          & + span {
            @include remCalc(padding, 0, 20);
          }
        }
      }
      .select-btn {
        color: #999;
        i {
          @include remCalc(font-size, 26);
        }
      }
      .idCardPicker {
        height: 100%;
        display: flex;
        align-items: center;
        @include remCalc(font-size, 32);
        .null-text {
          color: #d4d4d4;
        }
        span {
          & + span {
            @include remCalc(padding, 0, 0, 0, 10);
          }
        }
      }
      .zhk-list_rarrow {
        color: #ccc;
        @include remCalc(font-size, 36);
        @include remCalc(margin-top, 4);
      }
      textarea {
        @include remCalc(font-size, 32);
        color: #333;
        @include remCalc(height, 102);
        width: 100%;
        @include remCalc(padding, 6, 0);
      }
    }
  }
}
// 购买数量
.linebar-list-num {
  background: #fff;
  @include thin-border(true, false);
  li {
    display: flex;
    @include remCalc(padding, 0, 30, 0, 0);
    @include remCalc(line-height, 42);
    @include thin-border(false, false, top);
    @include remCalc(margin-left, 30);
    &:first-child{
      &::after{
        display: none;
      }
    }
    .context-left {
      flex: 1;
      color: #333;
      @include remCalc(font-size, 32);
      @include remCalc(line-height, 88);
    }
    .context-right {
      text-align: right;
      .num-box {
        > i {
          display: inline-block;
          @include remCalc(font-size, 46);
          @include remCalc(margin-top, 20);
          &.activeClass {
            color: #459dff;
          }
          &.disabledClass {
            color: #ddd;
          }
        }
        .buy-num {
          color: #333;
          text-align: center;
          vertical-align: middle;
          @include remCalc(width, 70);
          @include remCalc(font-size, 32);
          @include remCalc(margin-bottom, 20);
        }
      }
    }
  }
}
.mint-loadmore-text{
  @include remCalc(font-size, 24);
  color:#666;
}
%translate3d {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
%box-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, .08);
}
.footer {
  @extend %box-shadow;
  @extend %flex;
  background: #fff;
  position: relative;
  z-index: 1;
  @include remCalc(padding, 14, 0);
  li {
    text-align: center;
    @extend %flex-item;
    color: #babfc9;
    &.active {
      color: $color-red;
      i {
        display: none;
        & + i {
          display: block;
        }

      }
    }
    a {
      color: inherit;
      display: block;
      width: 100%;
      @include remCalc(height, 82);
      i {
        @include remCalc(font-size, 54);
        display: block;
        & + i {
          display: none;
        }
      }
      > div {
        @include remCalc(padding-top, 4);
        @include remCalc(font-size, 20);
      }
    }
  }
}

.fieldNo{
  .mint-cell-wrapper{
    background: #fff;
  }
}
.new-form-list{
  .form-item{
    display: flex;
    @include remCalc(padding, 14,30);
    @include remCalc(min-height , 60);
    justify-content:space-between;
    align-items: center;
    .label{
      @include remCalc(font-size, 32);
      @include remCalc(width, 230);
      @include remCalc(margin-left, 16);
      color:#333;
      margin:0;
    }
    .pick-value{
      flex:1;
      text-align: right;
      @include remCalc(min-height , 60);
      @include remCalc(line-height, 60);
      @include remCalc(font-size, 28);
      color:#888;
    }
    .zhk-list_rarrow{
      @include remCalc(font-size, 28);
      color:#888;
    }
  }
    .mint-cell-wrapper{
      background: #fff;
      background-size:0 0;
      background-image: none!important;
      background-position: center;
      .mint-cell-label{
        @include remCalc(font-size, 32);
        color:#333;
        margin:0;
      }
      .mint-cell-title{
        width: auto!important;
        .mint-cell-text{
          @include remCalc(font-size, 32);
          color:#333;
        }
      }

    }
  .border-bt-all {
    @include thin-border(true, false);
  }
  .border-bt {
    @include thin-border(false, false,bottom);

  }
  .border-bt-left {
    @include thin-border(false, false,bottom);
    &:after {
      @include remCalc(left, 30);
    }
  }
}
.mint-msgbox-message{
  line-height: 1.5;
  padding: 8px 0 0 0;
}

.common-link{
  color: $color-red;
  @include remCalc(font-size, 30);
  text-align: center;
  width: 100%;
  display: inline-block;
  @include remCalc(margin-top, 20);

}
.mint-indicator-mask{
  z-index:10000000
}
.page-infinite-loading {
  text-align: center;
  @include remCalc(margin-top, 20);
  @include remCalc(height, 80);
  @include remCalc(line-height, 80);
  @include remCalc(font-size, 14);
}
.mt20{
  @include remCalc(margin-top, 20);
}
.common-notice {
  background: #fdfcec;
  @include remCalc(font-size, 20);
  @include remCalc(height, 60);
  @include remCalc(line-height, 60);
  @include remCalc(padding, 0, 30);
  color: #f87c36;
  display: inline-flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  i {
    @include remCalc(font-size, 32);
    @include remCalc(padding-right, 12);
  }
  &.blue{
    color:#459DFF;
    background: #DCECFF ;
  }
}
.color-blue{
  color:$color-red;
}
.mesBox{
  >p{
    color: #333;
    @include remCalc(font-size, 28);
    text-align: left!important;
    &+p{
      color: #999;
      @include remCalc(font-size, 22);
      @include remCalc(margin-top, 32);
    }
  }
}
